<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }

        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <h1>按键改变颜色</h1>
        <div id="bgChange">
            keyCode为：
            <span id="keyCodeSpan"></span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {

            //获取div
            var $div = $('#bgChange');
            //获取显示按键的span
            var $keyCode = $('#keyCodeSpan')
            //给页面注册一个键盘按下事件.
            $(document).on('keydown', function (e) {
                // console.log(e.keyCode); //q81 w87  e69  r82  d68  f70  b66

                switch (e.keyCode) {
                    case 81:
                        $div.css('backgroundColor', 'green');
                        $keyCode.text(81);
                        break;
                    case 87:
                        $div.css('backgroundColor', 'skyblue');
                        $keyCode.text(87);
                        break;
                    case 69:
                        $div.css('backgroundColor', 'red');
                        $keyCode.text(69);
                        break;
                    case 82:
                        $div.css('backgroundColor', 'yellow');
                        $keyCode.text(82);
                        break;
                    case 68:
                        $div.css('backgroundColor', 'black');
                        $keyCode.text(68);
                        break;
                    case 70:
                        $div.css('backgroundColor', 'white');
                        $keyCode.text(70);
                        break;
                    case 66:
                        $div.css('backgroundColor', 'orange');
                        $keyCode.text(66);
                        break;
                    default:
                        $div.css('backgroundColor', 'pink');
                        $keyCode.text('没有这个建');
                        break;

                }
            })

        });
    </script>
</body>

</html>